<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--顶部导航栏-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="topbar">
    <a class="navbar-brand" th:href="@{/main.html}" th:text="${session.userName}"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a th:class="${active == 'dashboard' ? 'nav-link active' : 'nav-link'}" th:href="@{/main.html}">
                恩爱广场
            </a>
            <a th:class="${active == 'list' ? 'nav-link active' : 'nav-link'}" th:href="@{/user.html}">
                好友列表
            </a>
            <a th:class="${active == 'our' ? 'nav-link active' : 'nav-link'}" th:href="@{/our.html}">
                我俩专属
            </a>
            <a th:class="${active == 'write' ? 'nav-link active' : 'nav-link'}" th:href="@{/write.html}">
                说点什么
            </a>
            <a th:class="${active == 'me' ? 'nav-link active' : 'nav-link'}" th:href="@{/me.html}">
                我的主页
            </a>
            <a th:class="${active == 'test' ? 'nav-link active' : 'nav-link'}" th:href="@{/test.html}">
                玩玩小游戏
            </a>
        </div>
    </div>
</nav>
<!--主页卡片样式模板-->
<div class="shadow-lg card text-white bg-secondary mb-3" th:fragment="note" th:each="note : ${notePull}">
    <div class="card-header">[[${note?.userName}]]</div>
    <div class="card-body">
        <p class="card-text">[[${note?.noteMsg}]]</p>
    </div>
    <div class="container">
        <div class="row" style="padding-bottom: 15px">
            <div class="col-lg" th:each="filePath:${note.files}">
                <img th:src="${filePath}" class="img-thumbnail mw-100 rounded">
            </div>
        </div>
    </div>
</div>
<!--好友列表模板-->
<div th:fragment="friendList">
    <button type="button" class="btn btn-primary btn-block">添加好友</button>
    <hr style="border-top:1px dashed #987cb9;" width="100%" color="#987cb9" size=1>
    <ul class="list-group">
        <a th:each="friends : ${friendLists}" th:name="${friends.accountId}" href="#" th:onclick="pullMsg([[${friends.accountId}]])" class="list-group-item list-group-item-action list-group-item-primary">
            [[${friends.userName}]]
            <span th:id="friend+${friends.accountId}" th:text="${notCheckCount[friends.accountId]}" class="badge badge-primary badge-pill"></span>
        </a>
    </ul>
</div>
<div th:fragment="gameFriendList">
    <button type="button" class="btn btn-primary btn-block">添加好友</button>
    <hr style="border-top:1px dashed #987cb9;" width="100%" color="#987cb9" size=1>
    <ul class="list-group">
        <a th:each="friends : ${friendLists}" th:name="${friends.accountId}" th:onclick="selectOne([[${friends.accountId}]])" class="list-group-item list-group-item-action list-group-item-primary">
            [[${friends.userName}]]
        </a>
    </ul>
</div>
<!--聊天界面模板-->
<div class="row h-100" th:fragment="chatViewInfo">
    <h2 id="receiverId" th:name="${receiverId}" th:text="${receiverName}"></h2>
    <div class="w-100"></div>
    <div class="col border h-75" style="overflow: auto" id="msg_area">
        <div th:each="chatInfo : ${chatInfos}" class="alert alert-primary" role="alert">
            [[${chatInfo.senderName}]] : [[${chatInfo.noteMsg}]]
        </div>
    </div>
    <div class="w-100"></div>
    <div class="col border">
        <textarea class="w-75" id="msg_send" rows="2"></textarea>
        <button type="button" th:onclick="sendmsg([[${receiverId}]])" class="btn btn-primary" id="sendmsg">发送</button>
    </div>
</div>
<!--游戏大厅界面-->
<div th:fragment="gameRoom">
    <div class="card-columns">
            <div class="card" th:each="gameRoom:${gameRooms}">
                <div class="card-body">
                    <h5 class="card-title" th:text="${gameRoom.roomId}"></h5>
                    <p class="card-text" th:text="一号玩家--"></p>
                    <p class="card-text" th:text="二号玩家--"></p>
                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">开始决斗</a>
                </div>
            </div>
    </div>
</div>
<!--游戏界面-->
<div id="gameViewing" style="height: 800px ; width: 1200px ; background: #1a1a1a" th:fragment="gameView">

</div>
</html>